WebGL Transform Feedback Varying : Capture d'attributs de sommet en détail

Transform Feedback est une fonctionnalité puissante de WebGL qui vous permet de capturer la sortie des vertex shaders et de l'utiliser comme entrée pour des passes de rendu ultérieures. Cette technique ouvre la porte à un large éventail d'effets de rendu avancés et de tâches de traitement de géométrie directement sur le GPU. Un aspect crucial du Transform Feedback est de comprendre comment spécifier quels attributs de sommet doivent être capturés, connus sous le nom de "varying". Ce guide offre un aperçu complet du Transform Feedback de WebGL en se concentrant sur la capture d'attributs de sommet à l'aide de varying.

Qu'est-ce que le Transform Feedback ?

Traditionnellement, le rendu WebGL implique l'envoi de données de sommets au GPU, leur traitement via des vertex et fragment shaders, et l'affichage des pixels résultants à l'écran. La sortie du vertex shader, après le découpage (clipping) et la division de perspective, est généralement rejetée. Le Transform Feedback change ce paradigme en vous permettant d'intercepter et de stocker ces résultats post-vertex shader dans un objet tampon (buffer object).

Imaginez un scénario où vous souhaitez simuler la physique des particules. Vous pourriez mettre à jour les positions des particules sur le CPU et renvoyer les données mises à jour au GPU pour le rendu à chaque image. Le Transform Feedback offre une approche plus efficace en effectuant les calculs physiques (à l'aide d'un vertex shader) sur le GPU et en capturant directement les positions de particules mises à jour dans un tampon, prêtes pour le rendu de l'image suivante. Cela réduit la charge de travail du CPU et améliore les performances, en particulier pour les simulations complexes.

Concepts clés du Transform Feedback

• Vertex Shader : Le cœur du Transform Feedback. Le vertex shader effectue les calculs dont les résultats sont capturés.
• Variables Varying : Ce sont les variables de sortie du vertex shader que vous souhaitez capturer. Elles définissent quels attributs de sommet sont réécrits dans l'objet tampon.
• Objets Tampons (Buffer Objects) : L'espace de stockage où les attributs de sommet capturés sont écrits. Ces tampons sont liés à l'objet Transform Feedback.
• Objet Transform Feedback : Un objet WebGL qui gère le processus de capture des attributs de sommet. Il définit les tampons cibles et les variables varying.
• Mode Primitif : Spécifie le type de primitives (points, lignes, triangles) générées par le vertex shader. Ceci est important pour une disposition correcte du tampon.

Mettre en place le Transform Feedback en WebGL

Le processus d'utilisation du Transform Feedback comporte plusieurs étapes :

1. Créer et configurer un objet Transform Feedback :

   Utilisez gl.createTransformFeedback() pour créer un objet Transform Feedback. Ensuite, liez-le en utilisant gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback).

2. Créer et lier des objets tampons :

   Créez des objets tampons avec gl.createBuffer() pour stocker les attributs de sommet capturés. Liez chaque objet tampon à la cible gl.TRANSFORM_FEEDBACK_BUFFER en utilisant gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, index, buffer). L'index correspond à l'ordre des variables varying spécifiées dans le programme de shaders.

3. Spécifier les variables varying :

   C'est une étape cruciale. Avant de lier le programme de shaders, vous devez indiquer à WebGL quelles variables de sortie (variables varying) du vertex shader doivent être capturées. Utilisez gl.transformFeedbackVaryings(program, varyings, bufferMode).

   • program : L'objet du programme de shaders.
   • varyings : Un tableau de chaînes de caractères, où chaque chaîne est le nom d'une variable varying dans le vertex shader. L'ordre de ces variables est important, car il détermine l'index de liaison du tampon.
   • bufferMode : Spécifie comment les variables varying sont écrites dans les objets tampons. Les options courantes sont gl.SEPARATE_ATTRIBS (chaque varying va dans un tampon séparé) et gl.INTERLEAVED_ATTRIBS (toutes les variables varying sont entrelacées dans un seul tampon).
4. Créer et compiler les shaders :

   Créez les vertex et fragment shaders. Le vertex shader doit produire en sortie les variables varying que vous souhaitez capturer. Le fragment shader peut être nécessaire ou non, selon votre application. Il peut être utile pour le débogage.

5. Lier le programme de shaders :

   Liez le programme de shaders en utilisant gl.linkProgram(program). Il est important d'appeler gl.transformFeedbackVaryings() *avant* de lier le programme.

6. Commencer et terminer le Transform Feedback :

   Pour commencer à capturer les attributs de sommet, appelez gl.beginTransformFeedback(primitiveMode), où primitiveMode spécifie le type de primitives générées (par ex., gl.POINTS, gl.LINES, gl.TRIANGLES). Après le rendu, appelez gl.endTransformFeedback() pour arrêter la capture.

7. Dessiner la géométrie :

   Utilisez gl.drawArrays() ou gl.drawElements() pour effectuer le rendu de la géométrie. Le vertex shader s'exécutera, et les variables varying spécifiées seront capturées dans les objets tampons.

Exemple : Capture des positions de particules

Illustrons cela avec un exemple simple de capture de positions de particules. Supposons que nous ayons un vertex shader qui met à jour les positions des particules en fonction de la vitesse et de la gravité.

Vertex Shader (particle.vert)

#version 300 es

in vec3 a_position;

in vec3 a_velocity;

uniform float u_timeStep;

out vec3 v_position;

out vec3 v_velocity;

void main() {
 vec3 gravity = vec3(0.0, -9.8, 0.0);
 v_velocity = a_velocity + gravity * u_timeStep;
 v_position = a_position + v_velocity * u_timeStep;

 gl_Position = vec4(v_position, 1.0);
}

Ce vertex shader prend a_position et a_velocity comme attributs d'entrée. Il calcule la nouvelle vitesse et la nouvelle position de chaque particule, stockant les résultats dans les variables varying v_position et v_velocity. La variable `gl_Position` est définie sur la nouvelle position pour le rendu.

Code JavaScript

// ... Initialisation du contexte WebGL ...

// 1. Créer un objet Transform Feedback
const transformFeedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

// 2. Créer des objets tampons pour la position et la vitesse
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particlePositions, gl.DYNAMIC_COPY); // Positions initiales des particules

const velocityBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particleVelocities, gl.DYNAMIC_COPY); // Vitesses initiales des particules

// 3. Spécifier les variables varying
const varyings = ['v_position', 'v_velocity'];
gl.transformFeedbackVaryings(program, varyings, gl.SEPARATE_ATTRIBS);  // Doit être appelé *avant* de lier le programme.

// 4. Créer et compiler les shaders (omis pour la brièveté)
// ...

// 5. Lier le programme de shaders
gl.linkProgram(program);

// Lier les tampons de Transform Feedback
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, positionBuffer);  // Index 0 pour v_position
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, velocityBuffer);  // Index 1 pour v_velocity

// Obtenir les emplacements des attributs
const positionLocation = gl.getAttribLocation(program, 'a_position');
const velocityLocation = gl.getAttribLocation(program, 'a_velocity');

// --- Boucle de rendu ---
function render() {
 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

 gl.useProgram(program);

 // Activer les attributs
 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

 gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.vertexAttribPointer(velocityLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(velocityLocation);

 // 6. Commencer le Transform Feedback
 gl.enable(gl.RASTERIZER_DISCARD); // Désactiver la rastérisation
gl.beginTransformFeedback(gl.POINTS);

 // 7. Dessiner la géométrie
 gl.drawArrays(gl.POINTS, 0, numParticles);

 // 8. Terminer le Transform Feedback
 gl.endTransformFeedback();
gl.disable(gl.RASTERIZER_DISCARD); // Réactiver la rastérisation

 // Échanger les tampons (optionnel, si vous voulez afficher les points)
 // Par exemple, refaire le rendu du tampon de position mis à jour.

 requestAnimationFrame(render);
}

render();

Dans cet exemple :

• Nous créons deux objets tampons, un pour les positions des particules et un pour les vitesses.
• Nous spécifions v_position et v_velocity comme variables varying.
• Nous lions le tampon de position à l'index 0 et le tampon de vitesse à l'index 1 des tampons de Transform Feedback.
• Nous désactivons la rastérisation en utilisant gl.enable(gl.RASTERIZER_DISCARD) car nous voulons uniquement capturer les données des attributs de sommet ; nous ne voulons rien afficher dans cette passe. C'est important pour les performances.
• Nous appelons gl.drawArrays(gl.POINTS, 0, numParticles) pour exécuter le vertex shader sur chaque particule.
• Les positions et vitesses mises à jour des particules sont capturées dans les objets tampons.
• Après la passe de Transform Feedback, vous pourriez échanger les tampons d'entrée et de sortie, et faire le rendu des particules en fonction des positions mises à jour.

Variables Varying : Détails et considérations

Le paramètre `varyings` dans `gl.transformFeedbackVaryings()` est un tableau de chaînes de caractères représentant les noms des variables de sortie de votre vertex shader que vous souhaitez capturer. Ces variables doivent :

• Être déclarées comme variables out dans le vertex shader.
• Avoir un type de données correspondant entre la sortie du vertex shader et le stockage de l'objet tampon. Par exemple, si une variable varying est un vec3, l'objet tampon correspondant doit être assez grand pour stocker des valeurs vec3 pour tous les sommets.
• Être dans le bon ordre. L'ordre dans le tableau `varyings` dicte l'index de liaison du tampon. Le premier varying sera écrit dans le tampon d'index 0, le deuxième à l'index 1, et ainsi de suite.

Alignement des données et disposition du tampon

Comprendre l'alignement des données est crucial pour le bon fonctionnement du Transform Feedback. La disposition des attributs de sommet capturés dans les objets tampons dépend du paramètre bufferMode de `gl.transformFeedbackVaryings()` :

• gl.SEPARATE_ATTRIBS : Chaque variable varying est écrite dans un objet tampon séparé. L'objet tampon lié à l'index 0 contiendra toutes les valeurs du premier varying, l'objet tampon lié à l'index 1 contiendra toutes les valeurs du deuxième varying, et ainsi de suite. Ce mode est généralement plus simple à comprendre et à déboguer.
• gl.INTERLEAVED_ATTRIBS : Toutes les variables varying sont entrelacées dans un seul objet tampon. Par exemple, si vous avez deux variables varying, v_position (vec3) et v_velocity (vec3), le tampon contiendra une séquence de vec3 (position), vec3 (vitesse), vec3 (position), vec3 (vitesse), et ainsi de suite. Ce mode peut être plus efficace pour certains cas d'utilisation, en particulier lorsque les données capturées seront utilisées comme attributs de sommet entrelacés dans une passe de rendu ultérieure.

Correspondance des types de données

Les types de données des variables varying dans le vertex shader doivent être compatibles avec le format de stockage des objets tampons. Par exemple, si vous déclarez une variable varying comme out vec3 v_color, vous devez vous assurer que l'objet tampon est assez grand pour stocker des valeurs vec3 (généralement des valeurs à virgule flottante) pour tous les sommets. Des types de données incompatibles peuvent entraîner des résultats inattendus ou des erreurs.

Gestion du rejet du rastériseur (Rasterizer Discard)

Lorsque vous utilisez le Transform Feedback uniquement pour capturer des données d'attributs de sommet (et non pour afficher quoi que ce soit dans la passe initiale), il est crucial de désactiver la rastérisation en utilisant gl.enable(gl.RASTERIZER_DISCARD) avant d'appeler gl.beginTransformFeedback(). Cela empêche le GPU d'effectuer des opérations de rastérisation inutiles, ce qui peut améliorer considérablement les performances. N'oubliez pas de réactiver la rastérisation avec gl.disable(gl.RASTERIZER_DISCARD) après avoir appelé gl.endTransformFeedback() si vous avez l'intention d'afficher quelque chose dans une passe ultérieure.

Cas d'utilisation du Transform Feedback

Le Transform Feedback a de nombreuses applications dans le rendu WebGL, notamment :

• Systèmes de particules : Comme démontré dans l'exemple, le Transform Feedback est idéal pour mettre à jour les positions, les vitesses et d'autres attributs des particules directement sur le GPU, permettant des simulations de particules efficaces.
• Traitement de géométrie : Vous pouvez utiliser le Transform Feedback pour effectuer des transformations géométriques, telles que la déformation de maillage, la subdivision ou la simplification, entièrement sur le GPU. Imaginez la déformation d'un modèle de personnage pour une animation.
• Dynamique des fluides : La simulation de l'écoulement des fluides sur le GPU peut être réalisée avec le Transform Feedback. Mettez à jour les positions et les vitesses des particules de fluide, puis utilisez une passe de rendu séparée pour visualiser le fluide.
• Simulations physiques : Plus généralement, toute simulation physique nécessitant la mise à jour des attributs de sommet peut bénéficier du Transform Feedback. Cela peut inclure la simulation de tissus, la dynamique des corps rigides ou d'autres effets basés sur la physique.
• Traitement de nuages de points : Capturez des données traitées à partir de nuages de points pour la visualisation ou l'analyse. Cela peut impliquer le filtrage, le lissage ou l'extraction de caractéristiques sur le GPU.
• Attributs de sommet personnalisés : Calculez des attributs de sommet personnalisés, tels que les vecteurs normaux ou les coordonnées de texture, en fonction d'autres données de sommet. Cela peut être utile pour les techniques de génération procédurale.
• Pré-passes de rendu différé (Deferred Shading) : Capturez les données de position et de normale dans des G-buffers pour les pipelines de rendu différé. Cette technique permet des calculs d'éclairage plus complexes.

Considérations sur les performances

Bien que le Transform Feedback puisse offrir des améliorations de performance significatives, il est important de prendre en compte les facteurs suivants :

• Taille des objets tampons : Assurez-vous que les objets tampons sont assez grands pour stocker tous les attributs de sommet capturés. Allouez la bonne taille en fonction du nombre de sommets et des types de données des variables varying.
• Surcharge de transfert de données : Évitez les transferts de données inutiles entre le CPU et le GPU. Utilisez le Transform Feedback pour effectuer autant de traitement que possible sur le GPU.
• Rejet du rastériseur : Activez gl.RASTERIZER_DISCARD lorsque le Transform Feedback est utilisé uniquement pour la capture de données.
• Complexité du shader : Optimisez le code du vertex shader pour minimiser le coût de calcul. Des shaders complexes peuvent impacter les performances, surtout avec un grand nombre de sommets.
• Échange de tampons (Buffer Swapping) : Lorsque vous utilisez le Transform Feedback dans une boucle (par ex., pour la simulation de particules), envisagez d'utiliser une double mise en tampon (échanger les tampons d'entrée et de sortie) pour éviter les aléas de lecture après écriture.
• Type de primitive : Le choix du type de primitive (gl.POINTS, gl.LINES, gl.TRIANGLES) peut avoir un impact sur les performances. Choisissez le type de primitive le plus approprié pour votre application.

Débogage du Transform Feedback

Le débogage du Transform Feedback peut être difficile, mais voici quelques conseils :

• Vérifier les erreurs : Utilisez gl.getError() pour vérifier les erreurs WebGL après chaque étape de la configuration du Transform Feedback.
• Vérifier la taille des tampons : Assurez-vous que les objets tampons sont assez grands pour stocker les données capturées.
• Inspecter le contenu des tampons : Utilisez gl.getBufferSubData() pour lire le contenu des objets tampons sur le CPU et inspecter les données capturées. Cela peut aider à identifier des problèmes d'alignement de données ou de calculs dans le shader.
• Utiliser un débogueur : Utilisez un débogueur WebGL (par ex., Spector.js) pour inspecter l'état WebGL et l'exécution des shaders. Cela peut fournir des informations précieuses sur le processus de Transform Feedback.
• Simplifier le shader : Commencez avec un vertex shader simple qui ne sort que quelques variables varying. Ajoutez progressivement de la complexité au fur et à mesure que vous vérifiez chaque étape.
• Vérifier l'ordre des varying : Vérifiez que l'ordre des variables varying dans le tableau `varyings` correspond à l'ordre dans lequel elles sont écrites dans le vertex shader et aux indices de liaison des tampons.
• Désactiver les optimisations : Désactivez temporairement les optimisations de shader pour faciliter le débogage.

Compatibilité et extensions

Le Transform Feedback est pris en charge dans WebGL 2 et OpenGL ES 3.0 et supérieur. Dans WebGL 1, l'extension OES_transform_feedback fournit une fonctionnalité similaire. Cependant, l'implémentation de WebGL 2 est plus efficace et plus riche en fonctionnalités.

Vérifiez la prise en charge de l'extension en utilisant :

const transformFeedbackExtension = gl.getExtension('OES_transform_feedback');
if (transformFeedbackExtension) {
 // Utilisez l'extension
}

Conclusion

Le Transform Feedback de WebGL est une technique puissante pour capturer les données d'attributs de sommet directement sur le GPU. En comprenant les concepts de variables varying, d'objets tampons et de l'objet Transform Feedback, vous pouvez exploiter cette fonctionnalité pour créer des effets de rendu avancés, effectuer des tâches de traitement de géométrie et optimiser vos applications WebGL. N'oubliez pas de prendre en compte attentivement l'alignement des données, la taille des tampons et les implications en termes de performances lors de la mise en œuvre du Transform Feedback. Avec une planification et un débogage minutieux, vous pouvez libérer tout le potentiel de cette précieuse capacité de WebGL.